import React,{useState} from 'react'
import {  Button, Space,List, Avatar} from 'antd';
import {  PlusOutlined, MinusOutlined } from '@ant-design/icons';

export default function NewList() {
    
    const data = [
        {
          title: 'Ant Design Title 1',
        },
        {
          title: 'Ant Design Title 2',
        },
        {
          title: 'Ant Design Title 3',
        },
        {
          title: 'Ant Design Title 4',
        },
      ];
      const [newdata,setData] = useState(data)
      const add =()=> {
          console.log(...newdata)
        setData([...newdata,{title: 'Ant Design Title 4',}])
    }
    const remove =()=> {
        newdata.pop()
        setData([...newdata])
    }

    return (
        <div>
            <Space style={{ marginBottom: 16 }}>
                <Button onClick={() => add()} icon={<PlusOutlined />}>新增</Button>
                <Button onClick={() => remove()} icon={<MinusOutlined />}>删除</Button>
            </Space>
            <List
                itemLayout="horizontal"
                dataSource={newdata}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            title={<a href="https://ant.design">{item.title}</a>}
                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                        />
                    </List.Item>
                )}
            />
        </div>
    )
}
